import React from 'react';
import { Spin, Collapse, Col, Row } from 'antd';

import ScrollBarLayout from '@/components/ScrollBarLayout';

import { DoubleLeftOutlined } from '@ant-design/icons';

import cls from 'classnames';
import './styles.less';

interface IPaneComponent {
  nodeList: Record<string, any>[];
  takeBack: () => void;
}

const { Panel } = Collapse;

export const MagnifyPane: React.FC<IPaneComponent> = ({
  nodeList,
  takeBack,
}) => {
  const clsName = 'design-magnify-pane';

  const onDrag = (event: React.DragEvent<HTMLAnchorElement>, node: any) => {
    event.dataTransfer.setData('Text', JSON.stringify(node.data));
  };

  return (
    <div className={cls(`${clsName}-layout`)}>
      <div
        className={cls(`${clsName}-header`)}
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          cursor: 'pointer',
        }}
        onClick={() => {
          let composite: any = document.getElementById('design-composite');
          composite.style.width = '1%';
          takeBack();
        }}
      >
        <div className={cls(`${clsName}-title`)}>基本信息</div>
        <div>
          <DoubleLeftOutlined />
        </div>
      </div>
      <div className={cls(`${clsName}-content`)}>
        <Spin spinning={nodeList && nodeList?.length > 0 ? false : true}>
          <ScrollBarLayout>
            <Collapse expandIconPosition={'start'} bordered={true}>
              {nodeList && nodeList.length > 0
                ? nodeList.map((item, index) => {
                    return (
                      <Panel header={item.name} key={index}>
                        <Row>
                          {item.dataList && item.dataList.length > 0
                            ? item.dataList.map(
                                (iconItem: any, iconIndex: any) => {
                                  return (
                                    <Col
                                      key={`${iconItem.name}_${index}`}
                                      span={8}
                                      className={cls('ivr-pane-col')}
                                    >
                                      <div>
                                        <a
                                          key={iconIndex}
                                          title={iconItem.name}
                                          className={cls('ivr-pane-icon')}
                                          draggable={true}
                                          onDragStart={(ev) => {
                                            onDrag(ev, iconItem);
                                          }}
                                          style={{
                                            color: iconItem.data.iconColor,
                                          }}
                                        >
                                          <i
                                            style={{
                                              fontSize: '24px',
                                              fontFamily: 'kettle',
                                            }}
                                            className="kettle"
                                          >
                                            {iconItem?.icon}
                                            {/* {iconItem?.data?.icon} */}
                                          </i>
                                        </a>
                                      </div>
                                      <div
                                        className={cls('ivr-pane-icon-title')}
                                      >
                                        {iconItem.name}
                                      </div>
                                    </Col>
                                  );
                                },
                              )
                            : null}
                        </Row>
                      </Panel>
                    );
                  })
                : null}
            </Collapse>
          </ScrollBarLayout>
        </Spin>
      </div>
    </div>
  );
};
